<template>
	<view class="container">
		<u-navbar title="我的" :safeAreaInsetTop="true">
			<view class="u-nav-slot" slot="left"></view>
		</u-navbar>
		<view class="containerB">
			<img src="/static/myBg.jpg" alt="" />
			<view class="containerT">
				<img v-if="userInfo" :src="userInfo.profilePhoto" alt="" />
				<img v-else src="/static/myBg.jpg" alt="" />
				<span v-if="userInfo">
					{{userInfo.nickName}}
				</span>
				<span v-else>去登陆</span>
			</view>
		</view>
		<view class="containerBot">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="click(listItem)">
					<img :src="listItem.name" alt="" />
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>
<script>
	import {
		userInfoList
	} from '@/api/userCenter.js'
	export default {
		components: {

		},
		data() {
			return {
				userInfo: {},
				list: [{
						name: '/static/my/zuji.png',
						title: '足迹'
					},
					{
						name: '/static/my/shoucang.png',
						title: '收藏'
					},
					{
						name: '/static/my/gonglue.png',
						title: '我的攻略'
					},
					{
						name: '/static/my/shezhi.png',
						title: '设置'
					}
				]
			}
		},
		onShow() {
			this.getUserInfoList()

		},
		methods: {
			async getUserInfoList() {
				let res = await userInfoList()
				if (res.code == 200) {
					this.userInfo = res.data
					console.log(res);
				}
			},
			// 点击
			click(item) {
				if (item.title == '我的攻略') {
					uni.navigateTo({
						url: '/pages/strategy/strategy'
					})
				} else if (item.title == '收藏') {
					uni.navigateTo({
						url: '/pages/collectList/collectList'
					})
				} else if (item.title == '足迹') {
					uni.navigateTo({
						url: '/pages/footprint/footprint'
					})
				} else if (item.title == '设置') {
					uni.navigateTo({
						url: '/pages/set/set'
					})
				}
			}
		}
	}
</script>
<style lang='scss'>
	.container {
		.containerBot {
			width: 100%;
			height: calc(100vh - 510rpx);
			background-color: #F7FBF5;
			margin-top: -40rpx;
			border-radius: 20rpx 20rpx 0 0;

			img {
				margin-top: 20rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.grid-text {
				font-size: 14px;
				color: #909399;
				padding: 10rpx 0 20rpx 0rpx;
			}


		}

		.containerB {
			width: 100%;
			height: 550rpx;
			position: relative;
			z-index: -1;

			.containerT {
				display: flex;
				align-items: center;
				gap: 20rpx;
				color: #ffffff;
				position: absolute;
				bottom: 60rpx;
				left: 20rpx;

				img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}

			img {
				width: 100%;
				height: 100%;
			}
		}

		::v-deep .u-status-bar,
		::v-deep .u-navbar__content {
			background: none !important;
		}
	}

	page {
		background-color: #F7FBF5;
	}
</style>